<template>
  <div>
    <!-- 详情页头部有数据 -->
    <div class="header">
      <span>患者信息</span> <span> 姓名:{{ userinfo.user_name }} </span>
      <span>性别:{{
        userinfo.user_sex == 0 ? "保密" : userinfo.user_sex == 1 ? "男" : "女"
      }}
      </span>
      <span>年龄:{{ userinfo.user_age == 0 ? "保密" : userinfo.user_age }}</span><span>住院号：{{ userinfo.hospital_number }}</span>
      <span>QID：{{ userinfo.user_number }}</span>
      <div v-if="newReadorcompile" class="previewbtns">
        <span style="color:#c8c0b9">
          编辑模式
        </span>
        <span class="previewbtn" @click="previewbtn">预览</span>
      </div>
      <div v-else class="previewbtns">
        <span style="color:#c8c0b9">
          预览模式
        </span>
        <span class="previewbtnEdit" @click="previewbtn">编辑</span>
      </div>

    </div>
    <!-- 这里就是变量管理封装的内容 -->
    <!-- 左边部分 -->
    <div class="management">

      <!-- 左边目录 -->
      <div class="management-tree">
        <Tree :catalog="catalog" @handleNodeClick="handleNodeClick" />
      </div>
      <!-- <div class="management-tree">
        <div class="contenbox">
          <span>目录</span>
        </div>
        <el-tree
          ref="tree"
          title="目录"
          class="catalog"
          :highlight-current="true"
          style="height:90vh;padding-bottom:50px"
          :data="catalog"
          :props="defaultProps"
          node-key="item_id"
          default-expand-all
          :default-expanded-keys="[38]"
          :default-checked-keys="[39]"
          @node-click="handleNodeClick"
        >
          <span slot-scope="{node, data}">
            <span v-if="data.items">
              <svg-icon
                icon-class="folder"
                style="color: #bfbfbf; font-size: 16px; width: 20px"
                :class="{'btn-color':detalCatalogID==data.item_id}"
              />
            </span>
            <span v-else>
              <svg-icon
                :class="{'btn-color':detalCatalogID==data.item_id}"
                icon-class="folder1"
                style="font-size: 16px; width: 20px"
              />
            </span>
            <span :class="{'btn-color':detalCatalogID==data.item_id}">
              {{ node.label }}
            </span>
          </span>
        </el-tree>
      </div> -->

      <!-- 右边详情 -->
      <div ref="detailsContainer" class="right-content" style="width:75%;overflow:scroll;height:100vh">
        <div class="Details">
          <detal :readorcompile="readorcompile" :directory-list="directoryList" :newdirectory-list-lists="newdirectoryListLists" @directoryListList="directoryListList" />
        </div>
      </div>
    </div>
    <!-- 保存数据的内容 -->
    <div class="management-save">
      <div class="management-save-main pointer">
        <div v-show="newReadorcompile" class="management-save-main-click" @click="submitData">
          <i class="el-icon-document-checked" style="font-size:25px;margin-bottom:5px;" />
          <span>保存</span>
        </div>
        <div class="management-save-main-click" @click="setScroll">
          <i class="el-icon-arrow-up" style="font-size:25px;margin-bottom:5px;" />
          <span>TOP</span>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="set_bianji_pattern"
      append-to-body
      width="30%"
      style="margin-top: 150px"
    >
      <span>是否保存已录入数据？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="newcountermandList">取 消</el-button>
        <el-button @click="set_pattern_data">不 保 存</el-button>
        <el-button type="primary" @click="baocun_data">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 获取模板下目录列表 getDetails
import { getTemplateDirectoryList } from '@/api/stencil'
// 获取病例详情 // 保存数据 // 获取用户信息
import { getDetails, saveData, getUserInfo } from '@/api/case'
// 这里就是详情页渲染
import detal from './components/detail.vue'
// 目录
import Tree from './components/Tree.vue'
export default {
  // 注册
  components: {
    detal,
    Tree
  },
  data() {
    return {
      userinfo: {}, // 用户信息
      database_id: '', // 数据库id
      template_id: '', // 模板id
      user_id: '', // 用户id
      catalog: [], // 目录
      defaultProps: {
        children: 'items',
        label: 'item_name',
        disabled: 'disabled',
        item_id: 'item_id'
      },
      directoryList: [], // 存放用户点击左侧目录拿到的数据
      fullscreenLoading: false, // loading默认为true
      set_bianji_pattern: false, // 弹窗
      directoryData: {}, // 切换目录的数据据
      BackToOP: 0, // 触发监听回到顶部
      changeDirectory: false, // 切换目录
      directoryListLists: [], // 提交的数据
      newdirectoryListLists: false, // 是否清空子库已存的数据
      readorcompile: 0 // 阅读页还是编辑页编辑
      // newReadorcompile: false // 显示隐藏 true是编辑 false是预览

    }
  },
  computed: {
    // 获取详情页的选中id
    detalCatalogID() {
      return this.$store.state.medicalDetails.catalogueID
    },
    // 显示隐藏 true是编辑 false是预览
    newReadorcompile() {
      return this.$store.state.medicalDetails.newReadorcompile
    }
  },
  watch: {
    // loading弹出
    fullscreenLoading: {
      handler(value) {
        console.log(this.fullscreenLoading, value, 'loading被触发拉！！！')
        let loading
        if (!loading) {
          loading = this.$loading({
            lock: true,
            text: '加载中...',
            spinner: 'el-icon-loading',
            background: 'rgba(253, 253, 253, 0.9)'
          })
        }

        if (!value) {
          loading.close()
        }
      }
    },
    // Details
    // 回到顶部
    BackToOP: {
      handler() {
        if (this.BackToOP === 1) {
          console.log('回到顶部被触发')
          this.$refs.detailsContainer.scrollTop = 0
        }
      }
    },
    readorcompile: {
      handler(val) {
        console.log('newReadorcompile被改变', val)
        if (val === 1) {
          this.readorcompile = 1
          this.$store.dispatch('medicalDetails/setNewReadorcompile', true)
        } else {
          this.readorcompile = 0
          this.$store.dispatch('medicalDetails/setNewReadorcompile', false)
        }
      }
    }
  },
  async created() {
    this.fullscreenLoading = true
    console.log('wwwwwwwwwwww', this.$route.query.id)
    // 拿到数据库id 模板id
    this.user_id = this.$route.query.id
    if (this.$store.state.medicalDetails.newReadorcompile !== null) {
      this.readorcompile = this.$store.state.medicalDetails.newReadorcompile ? 1 : 0
    } else {
      this.readorcompile = Number(this.$route.query.readorcompile)
      console.log('等于null所以来这里')
    }

    if (this.readorcompile === 0) {
      // 这里是预览

      this.$store.dispatch('medicalDetails/setNewReadorcompile', false)
      console.log('这里是预览', this.readorcompile)
    } else {
      // 这里是编辑
      this.$store.dispatch('medicalDetails/setNewReadorcompile', true)
      console.log('这里是编辑', this.readorcompile)
    }
    // newReadorcompile
    this.database_id = this.$store.getters.database_id
    this.template_id = this.$store.getters.template_id
    // this.userinfo = this.$store.state.database.detailed
    this.newuserINFO()
    var data = {
      database_id: this.database_id,
      template_id: this.template_id
    }
    // 获取模板下目录列表
    const res = await getTemplateDirectoryList(data)
    console.log('-获取模板下目录列表', res)
    // 将数据赋值给catalog
    this.catalog = res.data.data
    // 调用接口拿到显示内容
    // 判断vuex中是否有目录id
    if (this.$store.state.medicalDetails.catalogueID !== '') {
      this.newGetTemplateQuestionList(
        this.database_id,
        this.template_id,
        this.$store.state.medicalDetails.catalogueID,
        this.user_id
      )
    } else {
      if (this.catalog[0].items.length >= 1) {
        this.newGetTemplateQuestionList(
          this.database_id,
          this.template_id,
          this.catalog[0].items[0].item_id,
          this.user_id
        )
      } else {
        this.newGetTemplateQuestionList(
          this.database_id,
          this.template_id,
          this.catalog[0].item_id,
          this.user_id
        )
      }
    }
    this.fullscreenLoading = false
    // await getDetails()
  },
  methods: {
    // 预览编辑切换
    previewbtn() {
      if (this.readorcompile === 0) {
        this.readorcompile = 1
      } else {
        this.readorcompile = 0
      }
    },
    // 将子组件的数据赋值
    directoryListList(data) {
      this.newdirectoryListLists = false
      this.directoryListLists = data
      console.log('将子组件的数据赋值', this.directoryListLists)
    },
    // 保存
    baocun_data() {
      console.log('this.directoryData', this.directoryData)
      //  this.directoryData
      //  如果用户点击确定
      this.$store.dispatch('medicalDetails/setCatalogueID', this.directoryData.item_id)
      this.submitData()
      //  this.$store.state.medicalDetails.catalogueID

      // const z = setTimeout(() => {
      this.newConfind(this.directoryData)
      //   clearTimeout(z)
      // }, 1000)
      // this.newGetTemplateQuestionList(this.database_id, this.template_id, this.directoryData.item_id, this.user_id)
      // this.newConfind(this.directoryData)
      this.set_bianji_pattern = false
    },
    // 不保存
    set_pattern_data() {
      //  this.directoryData
      // 清空数据
      // 跳转
      this.newConfind(this.directoryData)
      this.set_bianji_pattern = false
      // this.$store.dispatch('management/setDetailCatalogID', this.directoryData.item_id)
    },
    // 取消
    newcountermandList() {
      this.set_bianji_pattern = false
    },
    // 设置滚动条高度
    setScroll() {
      this.$refs.detailsContainer.scrollTop = 0
    },
    // 调用获取数据
    async  newuserINFO() {
      const resnewres = await getUserInfo({
        database_id: this.database_id,
        user_id: this.user_id
      })
      console.log('newres', resnewres)
      this.userinfo = resnewres.data.data
    },
    // 点击保存
    async submitData() {
      this.fullscreenLoading = true
      // 拿数据
      // 拿到总库id
      console.log(this.userinfo)
      const master_db_id = this.$store.state.user.getSelect.id
      const user_id = this.userinfo.id
      // const item_data = this.$store.state.medicalDetails.dataStorage
      const item_data = this.directoryListLists
      // 校验
      console.log('item_data', item_data)
      if (item_data.length === 0) {
        this.fullscreenLoading = false
        return this.$message.error('没有操作任何数据')
      }
      const item_id = this.$store.state.medicalDetails.catalogueID
      const res = {
        database_id: this.database_id,
        master_db_id,
        template_id: this.template_id,
        user_id,
        item_data,
        item_id
      }
      const news = await saveData(res)
      console.log('news', news)
      if (news.data.code === 1) {
        this.$message.success('保存成功')
        // 重新获取数据
        this.newGetTemplateQuestionList(
          this.database_id,
          this.template_id,
          item_id,
          this.user_id
        )
        // 清空数据
        // this.$store.dispatch('medicalDetails/setDataStorage', [])
        this.directoryListLists = []
        this.newdirectoryListLists = true
      } else {
        this.$message.error('保存失败')
      }

      // getUserInfo 调用接口， 刷新数据
      // const resnewres = await getUserInfo({
      //   database_id: this.database_id,
      //   user_id: this.user_id
      // })
      // console.log('newres', resnewres)
      // this.userinfo = resnewres.data.data
      await this.newuserINFO()
      this.fullscreenLoading = false
      // this.$store.state.database.detailed
      // this.$store.dispatch('database/setDetailed', resnewres.data.data)
    },
    // 封装获取目录下模块及变量
    async newGetTemplateQuestionList(
      database_id,
      template_id,
      item_id,
      user_id
    ) {
      this.fullscreenLoading = true
      console.log('this.  this.BackToOP = 1', this.changeDirectory)
      if (this.changeDirectory) {
        this.BackToOP = 1
        this.changeDirectory = false
      }

      const res = { database_id, template_id, item_id, user_id }
      // 将item_id存到vuex中
      this.$store.dispatch('medicalDetails/setCatalogueID', item_id)
      const list = await getDetails(res)
      const newres = list.data.data
      newres.forEach((directoryList, a) => {
        directoryList.second_item.forEach((second_item, b) => {
          if (second_item.question_answer_list.length !== 0) {
            second_item.question_answer_list.forEach((answer_list, c) => {
              answer_list.relation_answer.forEach((relation_answer) => {
                // 这里需要给判断改造数据
                if (relation_answer.question_type === 0) {
                  // 如果等于0说明需要改造他的孩子元素
                  if (relation_answer.child_question) {
                    relation_answer.child_question.forEach((child_question, d) => {
                      if (child_question.question_type === 1) {
                        child_question.answer_data.other_data_value = []
                        if (child_question.answer_data.answer_value.length === 0) { child_question.answer_data.answer_value[0] = '' }
                        if (child_question.answer_data.answer_value[0]) {
                          if (child_question.answer_data.answer_value[0].includes('&=>')) {
                            // 如果进来说明用户选中的数据
                            var z = child_question.answer_data.answer_value[0].split('&=>')
                            console.log('zzzzzzzzzzzz', z)
                            // 将z的第一个赋值给 child_question.answer_data.answer_value[0]
                            child_question.answer_data.answer_value[0] = Number(z[0])
                            // 将第二个赋值给 child_question.answer_data.db_data_id
                            child_question.answer_data.other_data_value[z[0]] = z[1]
                            // child_question.answer_data.other_data_value = z[1]
                            console.log('child_question', child_question)
                          } else {
                            child_question.answer_data.answer_value[0] = Number(child_question.answer_data.answer_value[0])
                          }
                        }
                      }
                      if (child_question.question_type === 2) {
                        // 多选
                        // 如果进来这里是多选
                        if (child_question.answer_data.answer_value.length >= 1) {
                          // child_question.answer_data.answer_value.forEach((answer_values, i) => {
                          //   if (answer_values.includes('&=>')) {
                          //     var z = answer_values.split('&=>')
                          //     child_question.answer_data.answer_value[i] = parseInt(z[0])
                          //     child_question.answer_data.other_data_value = z[1]
                          //   } else {
                          //     child_question.answer_data.answer_value[i] = parseInt(answer_values)
                          //   }
                          // })
                          child_question.answer_data.other_data_value = []
                          child_question.answer_data.answer_value.forEach((answer_values, i) => {
                            // child_question.answer_data.other_data_value[i] = {}
                            if (answer_values.includes('&=>')) {
                              var z = answer_values.split('&=>')
                              child_question.answer_data.answer_value[i] = parseInt(z[0])
                              // child_question.answer_data.other_data_value[i].id = z[0]
                              child_question.answer_data.other_data_value[z[0]] = z[1]
                            } else {
                              child_question.answer_data.answer_value[i] = parseInt(answer_values)
                            }
                          })
                        } else {
                          // if (child_question.option_list) {
                          //   child_question.answer_data.db_data_id = []
                          //   child_question.option_list.forEach((option_list) => {
                          //     if (option_list.is_other === 1) {
                          //       child_question.answer_data.db_data_id[option_list.option_id] = ''
                          //     }
                          //   })
                          // }
                        }
                      }
                      if (child_question.question_type === 3) {
                        // 下拉
                        if (child_question.answer_data.answer_value !== '') {
                          child_question.answer_data.answer_value = Number(child_question.answer_data.answer_value)
                        }
                      }
                      if (child_question.question_type === 4) {
                        // 图片渲染
                        if (child_question.answer_data.answer_value !== '') {
                          console.log(' child_question.answer_data.answer_value', child_question.answer_data)
                          const z = child_question.answer_data.answer_value.split(',')
                          console.log('zzzzzzzzzzzzz', z, child_question)
                          child_question.answer_data.answer_value = []
                          z.forEach((item, i) => {
                            console.log('zzzzzzz', item)
                            if (process.env.NODE_ENV === 'development') {
                              child_question.answer_data.answer_value[i] = {
                                url: 'http://api.qitaijk.cn' + item
                              }
                            } else {
                              child_question.answer_data.answer_value[i] = {
                                url: 'http://' + window.location.host + item
                              }
                            }
                          })
                          console.log(child_question.answer_data, 'child_question.answer_data')
                        }
                      }
                    })
                  }
                }
                if (relation_answer.question_type === 1) {
                  relation_answer.answer_data.other_data_value = []
                  // 这里是等于单选的时候
                  if (relation_answer.answer_data.answer_value.length === 0) {
                    relation_answer.answer_data.answer_value[0] = ''
                  }
                  if (relation_answer.answer_data.answer_value[0]) {
                    // 这里需要判断用户选中的内容中是否是其他
                    if (relation_answer.answer_data.answer_value[0].includes('&=>')) {
                      // 如果进来说明用户选中的数据
                      var z = relation_answer.answer_data.answer_value[0].split('&=>')
                      // 将z的第一个赋值给 relation_answer.answer_data.answer_value[0]
                      relation_answer.answer_data.answer_value[0] = Number(z[0])
                      // 将第二个赋值给 relation_answer.answer_data.db_data_id
                      // relation_answer.answer_data.other_data_value = z[1]
                      relation_answer.answer_data.other_data_value[z[0]] = z[1]
                      // console.log('relation_answer', relation_answer)
                    } else {
                      relation_answer.answer_data.answer_value[0] = Number(relation_answer.answer_data.answer_value[0])
                    }

                    // console.log('进来了转数字', relation_answer)
                  }
                }
                if (relation_answer.question_type === 2) {
                  // 如果进来这里是多选
                  if (relation_answer.answer_data.answer_value.length >= 1) {
                    relation_answer.answer_data.other_data_value = []
                    relation_answer.answer_data.answer_value.forEach((answer_values, i) => {
                      // relation_answer.answer_data.other_data_value[i] = {}
                      if (answer_values.includes('&=>')) {
                        var z = answer_values.split('&=>')
                        relation_answer.answer_data.answer_value[i] = parseInt(z[0])
                        // relation_answer.answer_data.other_data_value[i].id = z[0]
                        relation_answer.answer_data.other_data_value[z[0]] = z[1]
                      } else {
                        relation_answer.answer_data.answer_value[i] = parseInt(answer_values)
                        // newres[a].second_item[b].question_lists[d].answer_data.other_data_value = []
                      }
                    })
                  } else {
                    // if (relation_answer.option_list) {
                    //   relation_answer.answer_data.db_data_id = []
                    //   relation_answer.option_list.forEach((option_list) => {
                    //     if (option_list.is_other === 1) {
                    //       relation_answer.answer_data.db_data_id[option_list.option_id] = ''
                    //     }
                    //   })
                    // }
                  }
                }
                if (relation_answer.question_type === 3) {
                  if (relation_answer.answer_data.answer_value !== '') {
                    relation_answer.answer_data.answer_value = Number(relation_answer.answer_data.answer_value)
                  }
                }
                if (relation_answer.question_type === 4) {
                  // 图片渲染
                  if (relation_answer.answer_data.answer_value !== '') {
                    console.log(' relation_answer.answer_data.answer_value', relation_answer.answer_data)
                    const z = relation_answer.answer_data.answer_value.split(',')
                    console.log('zzzzzzzzzzzzz', z, relation_answer)
                    relation_answer.answer_data.answer_value = []
                    z.forEach((item, i) => {
                      console.log('zzzzzzz', item)
                      if (process.env.NODE_ENV === 'development') {
                        relation_answer.answer_data.answer_value[i] = {
                          url: 'http://api.qitaijk.cn' + item
                        }
                      } else {
                        relation_answer.answer_data.answer_value[i] = {
                          url: 'http://' + window.location.host + item
                        }
                      }
                    })
                    console.log(relation_answer.answer_data, 'relation_answer.answer_data')
                  }
                }
              })
            })
          } else {
            second_item.question_lists.forEach((question_lists, d) => {
              // console.log('question_lists', question_lists)
              if (question_lists.question_type === 0) {
                // console.log('00000000000000')
                if (question_lists.child_question) {
                  question_lists.child_question.forEach((child_question, e) => {
                    if (child_question.question_type === 1) {
                      child_question.answer_data.answer_value[0] = ''
                      newres[a].second_item[b].question_lists[d].child_question[e].answer_data.other_data_value = []
                      // console.log('进来了', child_question)
                      // newres[a].second_item[b].question_lists[d].child_question[e].answer_data.answer_value[0] = '1111'
                    }
                    if (child_question.question_type === 2) {
                      // 这里是多选
                      child_question.answer_data.other_data_value = []
                      newres[a].second_item[b].question_lists[d].child_question[e].answer_data.other_data_value = []
                    }
                    if (child_question.question_type === 5) {
                      // 这里是图片
                    }
                  })
                }
              }
              if (question_lists.question_type === 1) {
                question_lists.answer_data.answer_value[0] = ''
                // console.log('进来了', question_lists)
                newres[a].second_item[b].question_lists[d].answer_data.answer_value[0] = ''
                newres[a].second_item[b].question_lists[d].answer_data.other_data_value = []
              }
              if (question_lists.question_type === 2) {
                // 这里是多选
                question_lists.answer_data.other_data_value = []
                newres[a].second_item[b].question_lists[d].answer_data.other_data_value = []
              }
            })
          }
        })
      })
      // 这里改造数据改造成需要的数据
      this.directoryList = newres
      this.fullscreenLoading = false
      console.log(' this.directoryList', this.directoryList, newres)
      this.BackToOP = 0
      // this.$forceUpdate()
      // this.$store.dispatch('medicalDetails/setDetailPageData', this.directoryList)
    },
    // 切换目录清空vuex数据
    newConfind(data) {
      // 清空数据
      this.$store.dispatch('medicalDetails/setDataStorage', [])
      // 这里就是正常的调用接口

      this.newGetTemplateQuestionList(this.database_id, this.template_id, data.item_id, this.user_id)
    },
    // 切换目录
    async handleNodeClick(data) {
      // 用户点击触发之后需要判断用户点击的是否有items如果有就不做处理 如果没有在调用接口发送请求
      if (data.items) {
        if (data.items.length >= 1) {
          console.log('进来说明有items')
          return
        }
      }
      // 看是否有数据this.$store.state.medicalDetails.dataStorage
      // const dataStorage = this.$store.state.medicalDetails.dataStorage
      if (this.$store.state.medicalDetails.catalogueID === data.item_id) {
        console.log('切换自身不需要做任何操作')
        return
      }
      if (this.directoryListLists.length >= 1) {
        this.directoryData = data
        // 弹出弹框
        this.set_bianji_pattern = true
        return
      }
      this.$store.dispatch('management/setDetailCatalogID', data.item_id)
      console.log(data, '这里就是选中的数据', this.$store.state.management.detailCatalogID) // 这里就是选中的数据
      // 这里就是正常的调用接口
      this.changeDirectory = true
      console.log('这里就是正常的调用接口', this.changeDirectory)
      this.newGetTemplateQuestionList(this.database_id, this.template_id, data.item_id, this.user_id)
    }

  }

}
</script>
<style>
/* 点击树结构项的选中颜色 */
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
   background-color: rgba(22, 132, 252, 0.16) !important;
}
.el-tree-node__content {
   height: 38px;
}
.catalog .el-tree-node{
  background: #fff;
}
/* 设置滚动条的样式 */
::-webkit-scrollbar {
width:12px;
}
/* 滚动槽 */
::-webkit-scrollbar-track {
box-shadow:inset006pxrgba(0,0,0,0.3);
border-radius:10px;
}
/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
border-radius:10px;
background:rgba(0,0,0,0.1);
box-shadow:inset006pxrgba(0,0,0,0.5);
}
</style>
<style lang='scss' scoped>
/* 设置滚动条的样式 */

// 目录标题
.contenbox {
    display: flex;
    justify-content: space-between;
    background: #fff;
    font-size: 15px;
    padding-top: 10px;
    margin-top: 20px;
    padding-bottom: 20px;
    span{
      font-size: 20px;
      margin-left: 20px;
    }
}
// 选中目录
.btn-color{
  color: #3593f8 !important;
}
.header {
  width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  align-items: center;
  font-size: 18px;
  span {
    margin-left: 20px;
  }
  // 预览编辑按钮
  .previewbtns{
    display: flex;
    align-items: center;
    justify-content: center;
      .previewbtn{
    width: 70px;
    height: 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffba00;
    color: #fff;
        font-size: 16px;
     cursor:pointer;
  }
  .previewbtnEdit{
       width: 70px;
    height: 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1890ff;
    color: #fff;
        font-size: 16px;
     cursor:pointer;
  }
  }

}
.management {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  height: 800px;
  background-color: #f7f7f7;
  padding: 0 20px 200px 20px;
  .management-tree{
    width:14%;
    overflow-y: scroll;
    background: #f7f7f7;
    height:86vh;
  }
  .catalog {
    width: 100%;
  }

  .Details {
    margin-top: 20px;
    padding-left: 20px;
    width: 85%;
    height: 100vh;
    padding-bottom: 500px;
  }

}
.management-save {
    width: 10%;
    .management-save-main{
      background: #fff;
      position: fixed;
      bottom: 10%;
      right: 100px;
      border: 1px solid rgba(220, 223, 230, 0.5);
      border-bottom: none;
      width: 70px;
      >div{
        width: 70px;
        height: 70px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-bottom: 1px solid rgba(220, 223, 230, 0.5);
        font-size: 18px;
      }
    }
    .management-save-main-click:active{
      background: #ddd;
      color:#3593f8 ;
    }
  }

</style>
